.container {
  position: absolute;
  display: flex;
  z-index: 20;
  width: fit-content;
  user-select: none;
}

.container a,
.container button {
  border: none;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: 'Recursive', sans-serif;
  user-select: none;
  background-color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 1),
    1px 1px 3px rgba(255, 255, 255, 1), 1px 1px 8px rgba(255, 255, 255, 1);
}

.container button {
  padding: 16px 40px;
}

.container a:hover,
.container button:hover,
.container button[data-active='true'] {
  color: dodgerblue;
  background-color: white;
}

.bottom {
  bottom: 0px;
}

.left {
  left: 0px;
}

.right {
  right: 0px;
}

.top {
  top: 0px;
}

.center {
  position: fixed;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: none;
  z-index: 10;
}

.center a {
  color: black;
  text-decoration: none;
}
